<template>
  <div class="addAdvertise">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="广告名称" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>
      <el-form-item label="广告位置" :required="false">
        <el-select v-model="value" class="m-2" placeholder="App首页轮播">
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="开始时间" :required="true">
        <el-col :span="11">
          <el-form-item prop="date1">
            <el-date-picker
              v-model="ruleForm.date1"
              type="datetime"
              label="选择日期"
              placeholder="选择日期"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="到期时间" required>
        <el-col :span="11">
          <el-form-item prop="date2">
            <el-date-picker
              v-model="ruleForm.date2"
              type="datetime"
              label="选择日期"
              placeholder="选择日期"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="上线/下线" prop="resource" :required="false">
        <el-radio-group v-model="ruleForm.resource">
          <el-radio label="0" size="large">下线</el-radio>
          <el-radio label="1" size="large">上线</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="广告图片">
        <el-upload
          v-model:file-list="fileList"
          class="upload-demo"
          action="http://120.24.64.5:8088/mall-admin/minio/upload"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-success="uploadSuccess"
          list-type="picture"
        >
          <el-button type="primary" @click="uploadFn">点击上传</el-button>
          <template #tip>
            <div style="fontsize: 10px; color: gray">
              只能上传jpg/png文件,且不超过100kb
            </div>
          </template>
        </el-upload>
      </el-form-item>
      <el-form-item label="排序" prop="sort" :required="false">
        <el-input v-model="ruleForm.sort" />
      </el-form-item>
      <el-form-item label="广告链接" prop="url">
        <el-input v-model="ruleForm.url" />
      </el-form-item>
      <el-form-item label="广告备注" prop="desc" :required="false">
        <el-input v-model="ruleForm.desc" type="textarea" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          提交
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { reactive } from "vue";
import { ElMessage, ElMessageBox, FormInstance, FormRules } from "element-plus";
import { advertiseCreateApi } from "./api/index";
import type { UploadProps, UploadUserFile } from "element-plus";

const fileList = ref<UploadUserFile[]>([]);

const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
};

const handlePreview: UploadProps["onPreview"] = (file) => {
  console.log(file);
};

const uploadSuccess = (response: any) => {
  // console.log(response.data.url);
  url.value = response.data.url;
};
const url = ref("");

const input = ref("");

// 点击上传图片
const uploadFn = () => {};

// 下拉框
const value = ref(1);

const options1 = [
  {
    value: 1,
    label: "APP首页轮播",
  },
  {
    value: 0,
    label: "PC首页轮播",
  },
];

const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<addAdvertiseP2>({
  name: "", //广告名称
  region: "", //广告位置
  count: "",
  date1: "", //开始时间
  date2: "", //到期时间
  delivery: false,
  type: [],
  resource: "0", //上线下线
  desc: "", //广告备注
  sort: 0, //排序
  url: "",
});

const rules = reactive<FormRules>({
  name: [{ required: true, message: "请输入广告名称", trigger: "blur" }],
  region: [
    {
      required: true,
      message: "请输入广告名称",
      trigger: "change",
    },
  ],

  count: [
    {
      required: true,
      message: "Please select Activity count",
      trigger: "change",
    },
  ],
  date1: [
    {
      type: "date",
      required: true,
      message: "请选择开始时间",
      trigger: "change",
    },
  ],
  date2: [
    {
      type: "date",
      required: true,
      message: "请选择结束时间",
      trigger: "change",
    },
  ],
  type: [
    {
      type: "array",
      required: true,
      message: "Please select at least one activity type",
      trigger: "change",
    },
  ],
  resource: [
    {
      required: true,
      message: "Please select activity resource",
      trigger: "change",
    },
  ],
  desc: [
    { required: true, message: "Please input activity form", trigger: "blur" },
  ],
});

// 数据恢复
const clearDate = () => {
  (ruleForm.name = ""),
    (ruleForm.date1 = ""),
    (ruleForm.date2 = ""),
    (ruleForm.resource = "0"),
    (ruleForm.desc = ""),
    (ruleForm.sort = 0),
    (ruleForm.url = ""),
    (fileList.value = []);
};

const submitForm = async (formEl: FormInstance | undefined) => {
  //   if (!formEl) return;
  //   await formEl.validate((valid, fields) => {
  //     if (valid) {
  //       console.log("submit!");
  //     } else {
  //       console.log("error submit!", fields);
  //     }
  //   });
  //   console.log("广告名称", ruleForm.name);
  // console.log("广告位置", value.value);
  //   console.log("开始时间", ruleForm.date1);
  //   console.log("到期时间", ruleForm.date2);
  //   console.log("上线下线", ruleForm.resource);
  //   console.log("广告备注", ruleForm.desc);
  //   console.log("排序", ruleForm.sort);
  //   console.log("广告链接", ruleForm.url);
  // console.log("广告图片",fileList.value);

  //   console.log(value.value);
  ElMessageBox.confirm("是否提交数据", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      advertiseCreateApi({
        name: ruleForm.name,
        pic: url.value,
        startTime: ruleForm.date1,
        endTime: ruleForm.date2,
        status: ruleForm.resource,
        url: ruleForm.url,
        note: ruleForm.desc,
        sort: ruleForm.sort,
        type: value.value,
      }).then((res) => {
        if (res.code === 200) {
          clearDate();
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "success",
        message: "取消成功",
      });
    });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}));
</script>

<style scoped lang="less">
.addAdvertise {
  width: 800px;
  border: 1px solid #dcdfe6;
  margin: 50px auto;
  padding: 50px 100px;
  box-sizing: border-box;
  .row-name {
    display: flex;
    align-items: center;
  }
}
</style>
